<template>
  <a-card class="table-container">
    <div
      class="table-header"
      :style="props.PageDataHooks.dataInfo.pageType !== 3 ? {} : { height: '32px' }"
    >
      <div class="header-title">{{ props?.PageDataHooks.dataInfo.pageTitle }}</div>
      <div v-if="props.PageDataHooks.dataInfo.pageType !== 3"
           v-role="getPermCode(props.PageDataHooks.dataInfo.pageType, 'addBtn')"
      >
        <a-button
          type="primary"
          style="margin-right: 10px; height: 32px"
          @click.stop="props.PageDataHooks.handleAddClick"
        >
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新建</template>
        </a-button>
      </div>
    </div>
    <Table
      :columns="props?.PageDataHooks.dataInfo.columns"
      :data="props?.PageDataHooks.dataInfo.data"
      :total="props?.PageDataHooks.dataInfo.total"
      :current="props?.PageDataHooks.dataInfo.searchForm.page"
      :pageSize="props?.PageDataHooks.dataInfo.searchForm.pageSize"
      :stickyHeader="props?.PageDataHooks.dataInfo.stickyHeader"
      :showPageSize="props?.PageDataHooks.dataInfo.showPageSize"
      :scroll="props?.PageDataHooks.dataInfo.scroll"
      :scrollbar="props?.PageDataHooks.dataInfo.scrollbar"
      @handleSizeChange="props.PageDataHooks.handleSizeChange"
      @handleCurrentSizeChange="props.PageDataHooks.handleCurrentSizeChange"
      v-role="getPermCode(props.PageDataHooks.dataInfo.pageType, 'list')"
    >
      <template #id="{ record, rowIndex }">
        <span>{{ rowIndex + 1 }}</span>
      </template>
      <template #groupFlag="{ record }">
        <span>{{ record.groupFlag ? "病灶群组" : "单一病灶" }}</span>
      </template>
      <template #compType="{ record }">
        <span>{{ compTypeEnum[record.type] }}</span>
      </template>
      <template #action="{ record }">
        <div class="operator">
          <a-button
            v-if="props.PageDataHooks.dataInfo.pageType === 2"
            type="text"
            class="action-btn"
            @click.stop="() => props.PageDataHooks.handleViewClick(record)"
            >查看</a-button
          >
          <span class="separate" v-if="props.PageDataHooks.dataInfo.pageType === 2"
            >|</span
          >
          <a-button
            type="text"
            class="action-btn"
            @click.stop="() => props.PageDataHooks.handleUpdateClick(record)"
            v-role="getPermCode(props.PageDataHooks.dataInfo.pageType, 'editBtn')"
            >编辑</a-button
          >
        </div>
      </template>
    </Table>
  </a-card>
</template>
<script lang="ts" setup name="ConfigTable">
import Table from "@/components/table/index.vue";
import { getPermCode } from "../utils/useBaseData";
interface Prop {
  PageDataHooks: MarkPage.PageDataHooks;
}
const props = defineProps<Prop>();
const compTypeEnum: { [x: string]: string } = {
  select: "下拉菜单",
  radiobox: "单选框",
  text: "文本框",
  checkbox: "复选框",
  child_select: "二级下拉菜单",
};
</script>
<style lang="less" scoped>
@import url("../styles/markPage.less");
</style>
